<template>
  <div id="mians"
       ref="echarts">

  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data () {
    return {

    }
  },
  props: {
    option: {
      type: Array,
      default: () => ({})
    },
  },
  watch: {
    option: {
      handler (newval, oldval) {
        console.log(newval, oldval);
        this.option = newval
        this.init()
      },
      deep: true,
    },
  },
  methods: {
    init () {
      const data = this.option
      console.log("dddd", data);
      var myChart = echarts.init(this.$refs.echarts);
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   bottom: 0
        // },
        series: [
          {
            type: 'pie',
            radius: ['30%', '50%'],
            label: {
              position: 'outer',
              alignTo: 'none',
              bleedMargin: 5
            },
            data: data
          }
        ]
      })
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  },
  created () {

  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
#mians {
  width: 100%;
  height: 100%;
}
</style>
